<!--<script>-->
<!--import HelloWorld from './components/HelloWorld.vue'-->
<!--import TheWelcome from './components/TheWelcome.vue'-->

<!--export default {-->
<!--  setup() {-->
<!--    const gender = 'male'-->
<!--    function f3() {-->
<!--      console.log(789)-->
<!--    }-->
<!--    const f4 = function () {-->
<!--      console.log(100)-->
<!--    }-->

<!--    return {-->
<!--      username: '张三',-->
<!--      gender,-->
<!--      f1() {-->
<!--        console.log(123)-->
<!--      },-->
<!--      f2: () => {-->
<!--        console.log(456)-->
<!--      },-->
<!--      f3,-->
<!--      f4-->
<!--    }-->
<!--  },-->
<!--  beforeCreate() {-->
<!--    console.log('beforeCreate...')-->
<!--  },-->
<!--}-->
<!--</script>-->

<script setup>
import {computed, onMounted, provide, reactive, ref, watch} from "vue"
import SonComponent from "@/components/SonComponent.vue";

onMounted(() => {
  console.log(999)
})

onMounted(() => {
  console.log(123)
})

const obj = reactive({username: '张三'})
const gender = 'male'
const refGender = ref(gender)
console.log(obj.username)

const res = computed(() => gender + ' yes')

const computedRes = computed({
  set: (v) => {
    refGender.value = v
  },
  get: () => {
    return refGender.value + 'lll'
  }
})
console.log(computedRes)

watch(refGender, (newValue, oldValue) => {
  // 监听到变化时要执行的逻辑
  console.log(`refGender 发生变化啦, newValue = ${newValue}, oldValue = ${oldValue}`)
}, {immediate: true, deep: true})

watch(() => obj.username, (newValue, oldValue) => {
  // 监听到变化时要执行的逻辑
  console.log(`obj 发生变化啦, newValue = ${JSON.stringify(newValue)}, oldValue = ${JSON.stringify(oldValue)}`)
})

console.log(res)

function f3() {
  console.log(789)
}

const f4 = function () {
  console.log(100)
}
const f2 = () => {
  console.log(456)
}

const username = ref('李四')
const updateU = (v) => {
  console.log(`收到更新username的请求, v = ${v}`)
  username.value = v
}

const spanDOM = ref(null)
console.log(spanDOM.innerText)

// defineExpose({
//   spanDOM: spanDOM
// })

const son = ref(null)
onMounted(() => {
  console.log(son.value)
})
// 上层组件提供共享数据
provide('age', 18)

// 定义响应式数据 并通过provide提供给下层组件
const emailRef = ref('123')
provide('email', emailRef)

const updateEmail = (email) => emailRef.value = email
provide('updateEmail', updateEmail)

const address = ref('重庆')
const city = ref('万州')
const updateCity = v => city.value = v

const down = ref('大渡口')
const updateDown = (v) => {
  console.log(v)
}
</script>

<template>
  <header>
    <span ref="spanDOM">123</span>
    <SonComponent :city="city" @updateCity="updateCity" :down.sync="down" v-model="address" :username="username" :updateUser="updateU" @updateUsername="updateU" ref="son"></SonComponent>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125"/>
    {{ obj.username }}
    {{ refGender }}
    {{ res }}
    computedRes:{{ computedRes }}
    <input v-model="obj.username">
    <button @click="f1">点击触发事件1</button>
    <button @click="f2">点击触发事件2</button>
    <button @click="f3">点击触发事件3</button>
    <button @click="f4">点击触发事件4</button>
    <div class="wrapper">
      <HelloWorld msg="You did it!"/>
    </div>
    <span>{{down}}</span>
  </header>

  <main>
    <TheWelcome/>
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
